<script setup lang="ts">
interface Props {
  image: string
  name: string
  price: number | string
  sold: number | string
  id?: number // 添加商品ID
}

const props = defineProps<Props>()

// 在当前单页路由中打开商品详情
import { useRouter } from 'vue-router'
const router = useRouter()
const openProductDetail = () => {
  if (props.id) {
    router.push({ name: 'ProductDetail', params: { id: props.id } })
  }
}
</script>

<template>
  <div class="product-card" @click="openProductDetail">
    <div class="img-wrap">
      <img :src="image" :alt="name" />
    </div>
    <div class="info">
      <div class="title" :title="name">{{ name }}</div>
      <div class="meta">
        <span class="price">￥{{ price }}</span>
        <span class="sold">已售{{ sold }}+件</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.product-card {
  background: #fff;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.06);
  width: 100%;
  overflow: hidden;
  transition: transform .2s;
  cursor: pointer; // 添加鼠标指针样式

  &:hover { 
    transform: translateY(-0.125rem); 
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
  }

  .img-wrap {
    width: 100%;
    height: 8.75rem;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; // 添加overflow hidden确保图片不会超出容器

    img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      object-position: center; // 确保图片居中显示
    }
  }

  .info {
    padding: 0.625rem 0.75rem 0.75rem;
    .title {
      font-size: 0.8125rem;
      color: #333;
      line-height: 1.3;
      height: 2.125rem;
      overflow: hidden;
    }
    .meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.375rem;
      .price { color: #ee5530; font-weight: 700; }
      .sold { color: #999; font-size: 0.75rem; }
    }
  }
}
</style>
